<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="form.techTypeId" :options="options" @change="onLoad()" />
        </van-dropdown-menu>
        <van-list @load="onLoad">
            <van-cell v-for="item in list" :key="item.questionId" :title="item.questionName">
                <template #right-icon>
                    <van-icon name="edit" @click="editItem(item.questionId)" />
                    <van-icon name="delete" @click="deleteItem(item.questionId)" />
                </template>
            </van-cell>
        </van-list>
        <van-pagination v-model="form.pageIndex" :total-items="totalcount" :show-page-size="form.pageSize"
            :items-per-page="form.pageSize">
            <template #prev-text>
                <van-icon name="arrow-left" @click="prev()" />
            </template>
            <template #next-text>
                <van-icon name="arrow" @click="next()" />
            </template>
            <template #page="{ text }">
                <span @click="gotoPage(text)">{{ text }}</span>
            </template>
        </van-pagination>
    </div>
</template>
<script>
import { List, TechTypeList, Delete } from "@/api/question"
import { Dialog } from 'vant';
export default {
    data() {
        return {
            list: [],
            form: {
                techTypeId: 0,
                pageIndex: 1,
                pageSize: 2,
            },
            loading: false,
            // finished: false,
            totalcount: 0,
            options: [],
            Id: 0,
        }
    },
    methods: {
        //题库显示
        onLoad() {
            List(this.form).then(res => {
                this.list = res.data;
                this.totalcount = res.totalCount;
                console.log(this.totalcount);
                // 加载状态结束
                this.loading = false;
            })
        },
        //技术分类
        GetTechTypeList() {
            TechTypeList().then(res => {
                this.options = res.data;
                this.options.push({ text: "全部", value: 0 })
                console.log(res.data);
            })
        },
        //上一页
        prev() {
            if (this.form.pageIndex > 1) {
                this.form.pageIndex -= 1;
                this.onLoad();
            }
        },
        //下一页
        next() {
            if (this.form.pageIndex < Math.ceil(this.totalcount / this.form.pageSize)) {
                this.form.pageIndex += 1;
                this.onLoad();
            }
        },
        //指定页跳转
        gotoPage(page) {
            this.form.pageIndex = page;
            this.onLoad();
        },
        //修改
        editItem(Id) {
            this.$router.push("UpdateQuestion");
            window.localStorage.setItem("QId", Id);
        },
        deleteItem(Id) {
            Dialog.confirm({
                message: '您确定要删除吗?',
            })
                .then(() => {
                    // on confirm
                    console.log(Id);
                    Delete(Id).then(res => {
                        if (res) {
                            this.$notify({ type: 'success', message: '删除成功' });
                            this.onLoad();
                            return;
                        } else {
                            this.$notify({ type: 'danger', message: '删除失败' });
                            return;
                        }
                    })
                })
                .catch(() => {
                    // on cancel
                    this.$notify({ type: 'danger', message: '您取消删除了' });
                });
        }
    },
    created() {
        this.GetTechTypeList();
        this.onLoad();
    }
}
</script>
<style></style>